<div class="subheader" id="list-header">
  <div class="fixed-container">
    <div class="btn-group pull-right">
      <button class="btn btn-default" ng-click="createForm()" translate type="button">FORMS-LIST.ACTION.CREATE</button>
    </div>
    <h2>{{'FORMS-LIST.TITLE' | translate}}</h2>
  </div>
</div>
<div auto-height class="container-fluid content" id="list-container" offset="40">
  <div class="col-xs-2 filter-wrapper">
    <div class="input-group">
                <span class="input-group-addon"> <i
                        class="glyphicon glyphicon-search"></i>
                </span> <input class="form-control" ng-change="filterDelayed()" ng-model="model.pendingFilterText"
                               placeholder="{{'FORMS-LIST.SEARCH-PLACEHOLDER' | translate}}"
                               type="text">
    </div>
    <ul class="filter-list">
      <li ng-class="{'current' : filter.id == model.activeFilter.id}" ng-repeat="filter in model.filters">
        <a ng-click="activateFilter(filter)">{{'FORMS-LIST.FILTER.' + filter.labelKey | translate}}</a>
      </li>
    </ul>
  </div>

  <div class="col-xs-10 item-wrapper" id="list-items">
    <div class="dropdown-subtle pull-right">
      <div activiti-fix-dropdown-bug class="btn-group btn-group-sm">
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                type="button">{{'FORMS-LIST.SORT.' + model.activeSort.labelKey | translate}} <i
                class="caret"></i></button>
        <ul class="dropdown-menu pull-right">
          <li ng-repeat="sort in model.sorts">
            <a ng-click="activateSort(sort)">{{'FORMS-LIST.SORT.' + sort.labelKey | translate}}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="message clearfix">
      <div class="loading pull-left" ng-show="model.loading">
        <div class="l1"></div>
        <div class="l2"></div>
        <div class="l2"></div>
      </div>
      <div ng-if="!model.loading">
        <span ng-if="model.forms.size > 1">{{'FORMS-LIST.FILTER.' + model.activeFilter.labelKey + '-COUNT' | translate:model.forms}}</span>
        <span ng-if="model.forms.size == 1">{{'FORMS-LIST.FILTER.' + model.activeFilter.labelKey + '-ONE' | translate}}</span>
        <span ng-if="model.forms.size == 0 && (!model.filterText || model.filterText == '')">{{'FORMS-LIST.FILTER.' + model.activeFilter.labelKey + '-EMPTY' | translate}}</span>
        <span ng-if="model.forms.size > 0 && model.filterText !='' && model.filterText !== undefined">{{'FORMS-LIST.FILTER.FILTER-TEXT' | translate:model}}</span>
        <span ng-if="model.forms.size == 0 && model.filterText !='' && model.filterText !== undefined">{{'FORMS-LIST.FILTER.FILTER-TEXT-EMPTY' | translate:model}}</span>
      </div>
    </div>

    <div class="create-inline" ng-if="model.forms.size == 0 && (!model.filterText || model.filterText == '')">
      <span>{{'FORMS-LIST.FILTER.' + model.activeFilter.labelKey + '-EMPTY' | translate}}</span>
      <span><button class="btn btn-default" ng-click="createForm()" type="button">
                    <i class="glyphicon glyphicon-plus-sign"></i>{{'FORMS-LIST.ACTION.CREATE-INLINE' | translate}}
                </button></span>
    </div>

    <div class="item fadein" ng-repeat="form in model.forms.data track by $index">
      <div class="item-box"
           ng-click="showFormDetails(form);"
           ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(form.id, imageVersion) + '\')'}">
        <div class="actions">
          <span class="badge">v{{form.version}}</span>
          <div class="btn-group pull-right">
            <button class="btn btn-default" ng-click="showFormDetails(form); $event.stopPropagation();"
                    title="{{'FORM.ACTION.DETAILS' | translate}}"
                    type="button">
              <i class="glyphicon glyphicon-search"></i>
            </button>
            <button class="btn btn-default" ng-click="editFormDetails(form); $event.stopPropagation();"
                    title="{{'FORM.ACTION.OPEN-IN-EDITOR' | translate}}"
                    type="button">
              <i class="glyphicon glyphicon-edit"></i>
            </button>
          </div>
        </div>
        <div class="details">
          <h3 class="truncate" title="{{form.name}}">
            {{form.name}}
          </h3>
          <div class="basic-details truncate">
            <span><i class="glyphicon glyphicon-user"></i> {{form.createdBy}}</span> <span
                  title="{{form.lastUpdated | dateformat:'LLLL'}}"><i class="glyphicon glyphicon-pencil"></i> {{form.lastUpdated | dateformat}}</span>
          </div>
          <p>{{form.description}}</p>
        </div>
      </div>
    </div>

    <div class="show-more" ng-if="model.forms.data.length < model.forms.total">
      <a>{{'FORMS-LIST.ACTION.SHOW-MORE' | translate}}</a>
    </div>
  </div>
</div>
